<template>
	<div>
		<van-tree-select
			v-model:main-active-index="activeIndex"
			height="92vh"
			:items="type"
			@click-nav="ClassifyShop">
			<template #content>
				<div class="right" v-if="shop.length != 0">
					<div
						class="shop"
						v-for="item in shop"
						:key="item.id">
						<router-link
							:to="{ path: '/list/shop', query: { proid: item.id } }"
							active-class="to">
							<div class="img">
								<img :src="item.thumb_swiper" />
							</div>

							<div class="con">
								<p class="van-ellipsis">{{ item.name }}</p>
								<div>
									<span>￥{{ item.price }}</span>
									<span>库存:{{ item.stock }}</span>
								</div>
							</div>
						</router-link>
					</div>
				</div>
				<div class="right">
					<van-empty description="暂无商品" />
				</div>
			</template>
		</van-tree-select>

		<Footer></Footer>

		<!-- 网络请求加载状态 -->
		<van-overlay :show="isLoading" style="display: flex; justify-content: center; align-items: center;">
			<van-loading vertical>
				<template #icon>
					<van-icon name="star-o" size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>
	</div>
</template>

<script>
	import Footer from "components/common/Footer.vue";
	import { showFailToast } from "vant";
	export default {
		components: {
			Footer,
		},
		created() {
			this.ClassifyShop();
		},
		data() {
			return {
				activeIndex: 0,
				type: [],
				where: "",
				shop: [],
				isLoading: false
			};
		},
		methods: {
			async ClassifyShop(index) {
				let where = "";
				if (index) {
					where = index;
				}
				this.isLoading = true;
				let res = await this.$api.ClassifyShop({ where });
				if (res.code == 1) {
					res.data[0].forEach((element) => {
						element.text = element.name;
					});
					// 分类数据
					this.type = [
						{
							id: 0,
							text: "全部",
						},
						...res.data[0],
					];
					// 商品数据
					this.shop = res.data[1];
				} else {
					showFailToast({
						message: res.msg,
					});
					this.shop = [];
				}
				this.isLoading = false;
			},
		},
	};
</script>

<style lang="less" scoped>
	.right {
		width: 100%;
		height: 100%;
		// display: flex;
		// flex-wrap: wrap;
		overflow-y: auto;
		box-sizing: border-box;
		padding: 5px 2px;
		.shop {
			width: 48%;
			height: 180px;
			margin-left: 2%;
			margin-bottom: 2%;
			display: inline-block;
			a {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				box-sizing: border-box;
				flex-direction: column;
				padding: 2%;
				background-color: #eee;
				width: 100%;
				height: 100%;
				.img {
					width: 100%;
					height: 75%;
					img{
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: top;
					}
				}
				.con {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					width: 100%;
					height: 24%;
					padding: 1%;
					p {
						width: 100%;
						height: 50%;
					}
					div {
						display: flex;
						flex-direction: row;
						justify-content: space-around;
						width: 100%;
						height: 40%;
						color: #fe7923;
						span:nth-child(2){
							transform: scale(.8);
							transform-origin: right bottom;
						}
					}
				}
			}
		}
	}
</style>
